Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會利用目前 Visual Studio 內建的專案樣本建立一個初始的 .NET MAUI 專案，並且透過此 .NET MAUI 專案來把 TopStore App 的開發從 Xamairn.Forms 轉換到 .NET MAUI 上進行。

本篇是 Re: 從零改成用 .NET MAUI 技術來繼續過去用 Xamarin 開發的一個 App : TopStore 系列 系列文的 EP29。

繼前一回完成 ProductDetailPageViewModel 的設計之後，來調整一下 ProductDetailPage 的畫面設計吧！

首先找到 Pages 資料夾開啟 "ProductDetailPage.xaml" 這個檔案：

接著針對 ContentPage 標記的內部屬性作一些調整跟新增的設定，大致上跟過去在撰寫 PersonDetailPage 時的頁面設計差不多，除了為了讓 ProductDetailPageViewModel 的資料型態能夠正確的識別，也增寫了 x:DataType 的設計之外，也增加了 ToolbarItems 的運用。

如果嫌麻煩可以先把下圖藍色框的 XAML 標記碼刪除：

再直接貼入下面的 XAML 標記碼：

    x:Class="TopStoreApp.Pages.ProductDetailPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:viewmodels="clr-namespace:TopStoreApp.ViewModels"
    Title="{Binding EditProduct.Name}"
    x:DataType="viewmodels:ProductDetailPageViewModel">
    <ContentPage.ToolbarItems>
        <ToolbarItem Command="{Binding SaveCommand}" Text="{Binding IsEdit, Converter={StaticResource DetailPageToolBarItemDisplayText}, ConverterParameter='儲存,編輯'}" />
    </ContentPage.ToolbarItems>

完成結果如下圖紅框所示：

接著刪除本來 VerticalStackLayout 當中的 Label：

完成後如下圖箭頭所示：

接著再透過 Label、Entry 等 UI 元件做為的 Product 資料呈現方式，只是這次 Product 的屬性資料比較多，對應撰寫起來會花上一些功夫：

<Label
    HorizontalOptions="StartAndExpand"
    HorizontalTextAlignment="Start"
    Text="名稱:"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="{Binding IsEdit}"
    Placeholder="請輸入名稱..."
    Text="{Binding EditProduct.Name}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label x:Name="NameError" IsVisible="False" TextColor="Red" />
<Label
    HorizontalOptions="StartAndExpand"
    HorizontalTextAlignment="Start"
    Text="商品編號:"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="{Binding IsEdit}"
    Keyboard="Text"
    Placeholder="請輸入商品編號..."
    Text="{Binding EditProduct.Sn}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label x:Name="SnError" IsVisible="False" TextColor="Red" />
<Label
    HorizontalOptions="StartAndExpand"
    HorizontalTextAlignment="Start"
    Text="商品建議售價:"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="{Binding IsEdit}"
    Keyboard="Numeric"
    Placeholder="請輸入建議售價..."
    Text="{Binding EditProduct.Msrp}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label x:Name="MsrpError" IsVisible="False" TextColor="Red" />
<Label
    HorizontalOptions="StartAndExpand"
    HorizontalTextAlignment="Start"
    Text="商品售價:"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="{Binding IsEdit}"
    Placeholder="請輸入售價..."
    Text="{Binding EditProduct.Price}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label x:Name="PriceError" IsVisible="False" TextColor="Red" />
<Label
    HorizontalOptions="StartAndExpand"
    HorizontalTextAlignment="Start"
    Text="單位:"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="{Binding IsEdit}"
    Keyboard="Text"
    Placeholder="請輸入單位..."
    Text="{Binding EditProduct.Unit}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label x:Name="UnitError" IsVisible="False" TextColor="Red" />
<Label
    HorizontalOptions="StartAndExpand"
    HorizontalTextAlignment="Start"
    Text="包裝個數:"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="{Binding IsEdit}"
    Keyboard="Numeric"
    Placeholder="請輸入包裝個數..."
    Text="{Binding EditProduct.Package}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label x:Name="PackageError" IsVisible="False" TextColor="Red" />
<Label
    HorizontalOptions="StartAndExpand"
    HorizontalTextAlignment="Start"
    Text="備註:"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Entry
    HorizontalOptions="FillAndExpand"
    HorizontalTextAlignment="Start"
    IsEnabled="{Binding IsEdit}"
    Keyboard="Text"
    Placeholder="請輸入備註..."
    Text="{Binding EditProduct.Note}"
    VerticalOptions="Center"
    VerticalTextAlignment="Center" />
<Label x:Name="NoteError" IsVisible="False" TextColor="Red" />

完成後大概如下圖紅框所示：

再來就開啟 "ProductDetailPage.xaml.cs" 這個檔案：

要來調整類別的建構方法設計：

把原本的建構方法封裝成 private 後，再另外設計一個可傳入 ProductDetailPageViewModel 物件作為參數的建構方法，並在此建構方法執行中設定其 BindingContext 屬性值指定為傳入的參數：

public ProductDetailPage(ViewModels.ProductDetailPageViewModel productDetailPageViewModel) : this()
{
    BindingContext = productDetailPageViewModel;
}

完成的新建構方法如下圖紅框所示：

完成後，就可以開啟 MauiProgram.cs 檔案：

並且找到先前有設計的 RegisterAppViewsAndViewModels() 方法：

並加入以下程式碼：

builder.Services.AddTransient<Pages.ProductDetailPage>();
builder.Services.AddTransient<ViewModels.ProductDetailPageViewModel>();

完成後如下圖紅框所示：

以上完成囉~~~

有興趣的人可以測試看看，是否可以正確地從 "物品項" 的列表選到某個物品項目後，就轉跳到此 ProductDetailPage 並且能夠進行 "編輯" 與 "儲存" 的功能吧！

本 EP 介紹所完成的範例程式碼可在此下載。

PS 本篇上傳的程式碼已有修正在 EP24 所撰寫的程式碼，GoodsPageViewModel 中撰寫的 Edit() 方法，其中的註解該行，最後傳遞參數的 personId 應為 productId。

PS' 本篇有用到在先前 Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore 當中所介紹的 EP12、EP13、EP25 的運用，就不在冗贅介紹了。